<template>
	<div class="">
		<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler"></baidu-map>
		<template v-if="model.visible">
			<el-dialog id="baidumap" title='地址选择' :visible="true">
				<div>
					<div style="text-align:center;width: 100%;">
						<div style="text-align:left;margin:0 auto;">
							<input type="text" id="suggestId" placeholder="请输入地点" size="20" value="百度" class="el-input__inner" />
							<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
							<div id="allmap" style="height: 360px;margin-top: 10px;"></div>
						</div>
						<div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 10px;">
							<el-button @click="close()">关闭</el-button>
							<el-button type="primary" @click="handleSave()" autofocus>保存</el-button>
						</div>
					</div>
				</div>

			</el-dialog>
		</template>

	</div>

</template>

<script>
	//	import { MP } from '@/js/plugins/zry.plugins.maptool.js';
	export default {
		props: {
			model: {
				visible: true,
				address: null,
				latitude: 0,
				longitude: 0,
			}
		},
		data() {
			return {
				map: null,
				labelPostitin: 'top',
				center: {
					lng: 0,
					lat: 0
				},
				zoom: 3,
				ac: null
			}
		},
		mounted() {},
		computed: {　　
			visible() {　　　　
				return this.model.visible;
			}
		},
		watch: {
			visible(newVal, oldVal) {
				console.log(BMap)
				this.$nextTick(() => {
					this.setMap(BMap);
				})　　　
			}
		},
		methods: {
			handler({
				BMap,
				map
			}) {

				this.center.lng = 118.1948711891;
				this.center.lat = 24.4810250498;
				this.zoom = 15;
			},
			close() {
				this.model.visible = false;
				this.$nextTick(() => {
					$('.tangram-suggestion-main').css({
						opacity: 0.01
					});
				})
			},
			handleSave() {
				this.$emit('selectBack', this.model);
				this.close();
			},
			setMap(BMap) {
				let that = this;
				var map = new BMap.Map("allmap"); // 创建Map实例
				that.map = map;
				if(that.model.longitude == 0 && that.model.latitude == 0) {
					var geolocation = new BMap.Geolocation();
					geolocation.getCurrentPosition(function(r) {
						if(this.getStatus() == BMAP_STATUS_SUCCESS) {
							console.log(r);
							that.model.longitude = r.point.lng;
							that.model.latitude = r.point.lat;
							that.setCurrentLocation(that.model.longitude, that.model.latitude, map);
						}
					}, {
						enableHighAccuracy: true
					}); //设置当前位置
				} else {
					that.setCurrentLocation(that.model.longitude, that.model.latitude, map);
					that.setMarker(that.model.longitude, that.model.latitude, map, true);
				}

				map.addEventListener("moveend", function() {
					that.setMarker(map.getCenter().lng, map.getCenter().lat, map, true);
				});
				map.addEventListener("zoomend", function() {
					that.setMarker(map.getCenter().lng, map.getCenter().lat, map, true);
				});
				this.setSearch();
			},
			setMarker(lng, lat, map, isChange = false) {
				map.clearOverlays();
				let that = this;
				let point = new BMap.Point(lng, lat);
				var mk = new BMap.Marker(point);
				if(isChange) {
					let address;
					new BMap.Geocoder().getLocation(point, res => {
						console.log(res);
						address = res.addressComponents;
						that.model.address = res.surroundingPois.length > 0 ?
							address.province + address.city + address.district + res.surroundingPois[0].title : res.address;
						if(this.ac) {
							this.ac.setInputValue(this.model.address);
						}
					})
				}

				mk.disableDragging()
				map.addOverlay(mk);
			},
			setSearch(map) {

				let that = this;
				var ac = new BMap.Autocomplete( //建立一个自动完成的对象
					{
						"input": "suggestId",
						"location": map,
						'onSearchComplete': function(AutocompleteResult) {
							console.log(AutocompleteResult)
						}
					}
				);
				this.ac = ac;
				//				debugger
				//				ac.setInputValue(this.model.address);
				setTimeout(() => {
					//					ac.hide()
				}, 1000)

				function G(id) {
					return document.getElementById(id);
				}
				ac.addEventListener("onhighlight", function(e) {
					//鼠标放在下拉列表上的事件
					var str = "";
					var _value = e.fromitem.value;
					var value = "";
					if(e.fromitem.index > -1) {
						value = _value.province + _value.city + _value.district + _value.street + _value.business;
					}
					str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
					value = "";
					if(e.toitem.index > -1) {
						_value = e.toitem.value;
						value = _value.province + _value.city + _value.district + _value.street + _value.business;
					}
					str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
					G("searchResultPanel").innerHTML = str;
				});
				var myValue;
				ac.addEventListener("onconfirm", function(e) {
					//鼠标点击下拉列表后的事件
					var _value = e.item.value;
					myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
					G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
					that.model.address = myValue;
					setPlace(map);
				});

				function setPlace(map) {
					map.clearOverlays(); //清除地图上所有覆盖物
					function myFun() {
						var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
						var mk = new BMap.Marker(pp);
						that.model.longitude = pp.lng;
						that.model.latitude = pp.lat;
						map.centerAndZoom(pp, 18);
						map.addOverlay(mk); //添加标注
					}
					var local = new BMap.LocalSearch(map, {
						//智能搜索
						onSearchComplete: myFun
					});
					local.search(myValue);
				}
			},
			setCurrentLocation(lng, lat, map) {
				let that = this;
				let point = new BMap.Point(lng, lat);
				map.centerAndZoom(point, 18);
				map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
				map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
				var mk = new BMap.Marker(point);
				mk.disableDragging()
				map.addOverlay(mk);
				//				that.setSearch(map);
				if(this.ac) {
					//					this.ac.setInputValue(this.model.address);
				}

			}
		}
	}
</script>
<style>
	.tangram-suggestion-main {
		z-index: 9999999999;
	}
	
	.map {
		width: 4px;
		height: 3px;
		position: fixed;
		top: -1000px;
		left: 0;
	}
</style>